<template>
    <header>
        <nav style="width: 98%;margin: 0 auto" class="navbar navbar-expand-lg navbar-dark bg-dark">
            <a class="navbar-brand" href="#">
                <i class="fa fa-cloud text-info"></i>
                云记账
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <router-link to="/home" class="nav-link">Home <span class="sr-only">(current)</span></router-link>
                    </li>
                    <li class="nav-item">
                        <router-link to="/cost" class="nav-link">支出管理</router-link>
                    </li>
                    <li class="nav-item">
                        <router-link to="/income" class="nav-link">收入管理</router-link>
                    </li>
                    <li class="nav-item dropdown">
                        <router-link to="/graph" class="nav-link sm-hidden">图形显示</router-link>
                        <a class="nav-link dropdown-toggle md-hidden" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            图形显示
                        </a>
                        <div class="dropdown-menu md-hidden" aria-labelledby="navbarDropdown">
                            <router-link to="/graph/line-cost" class="dropdown-item">月度支出变化图</router-link>
                            <router-link to="/graph/line-income" class="dropdown-item">月度收入变化图</router-link>
                            <router-link to="/graph/pie-cost" class="dropdown-item">支出成分图</router-link>
                            <router-link to="/graph/pie-income" class="dropdown-item">收入成分图</router-link>
                            <div class="dropdown-divider"></div>
                            <router-link to="/graph/bar-compare" class="dropdown-item">收支对比图</router-link>
                            <router-link to="/graph/line-profit" class="dropdown-item">净收入图</router-link>
                        </div>
                    </li>
                    <li class="nav-item">
                        <router-link to="/post" class="nav-link">记事本</router-link>
                    </li>
                </ul>
                <form class="form-inline">
                    <span v-show="loginUser.id" class="text-dark pr-3 hover-pointer">
                        <img v-if="loginUser.photo" v-on:mouseenter="showCard()" class="photo img-fluid sm-hidden" :src="loginUser.photo">
                        <img v-if="!loginUser.photo" v-on:mouseenter="showCard()" class="photo img-fluid sm-hidden" src="/static/image/img-4.jpg">
                        <router-link to="/zone/info"><img class="photo img-fluid md-hidden" :src="loginUser.photo"></router-link>
                    </span>
                    <button v-show="!loginUser.id" v-on:click="openLoginModal()" class="btn btn-outline-light my-2 my-sm-0" type="button">登录/注册</button>
                </form>
            </div>
        </nav>
        <the-login ref="loginComponent"></the-login>
        <div id="card" class="card" v-on:mouseleave="hideCard()">
            <div class="flex">
                <div class="title-img">
                    <img v-if="loginUser.photo" :src="loginUser.photo" style="width: 100px;height: 100px" class="title-img img-fluid" alt="...">
                    <img v-if="!loginUser.photo" src="/static/image/img-4.jpg" style="border-radius: 50%" class="card-img-top" alt="...">
                </div>
                <div class="title-text">
                    <h5 class="text-center">{{loginUser.name}}</h5>
                    等级：<span :class="textColorClass">LV{{expInfo.level}}</span><br/>
                    经验值：<span :class="textColorClass">{{expInfo.exp}}/{{expInfo.maxExp}}</span>
                    <div class="progress" style="width: 95%;">
                        <div :class="barColorClass" class="progress-bar" role="progressbar" :style="{width: expInfo.percent + '%'}" :aria-valuenow="expInfo.percent" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="flex">
                    <div class="half">
                        <router-link to="/zone/info">进入个人中心</router-link>
                    </div>

                    <div class="half text-right">
                        <a href="javascript:void(0)" v-on:click="logout()">退出登录</a>
                    </div>
                </div>

            </div>
        </div>

    </header>
</template>

<script>
    import TheLogin from "./The-Login";
    export default {
        name: "The-Header",
        components: {TheLogin},
        data: function() {
            return {
                loginUser: {},
                expInfo: {},
            }
        },
        computed:{
            barColorClass(){
                return {
                    'bg-secondary': this.expInfo.level === 1,
                    'bg-purple': this.expInfo.level === 2,
                    'bg-primary': this.expInfo.level === 3,
                    'bg-info': this.expInfo.level === 4,
                    'bg-success': this.expInfo.level === 5,
                    'bg-warning': this.expInfo.level === 6,
                    'bg-danger': this.expInfo.level >= 7
                }
            },
            textColorClass(){
                return {
                    'text-secondary': this.expInfo.level === 1,
                    'text-purple': this.expInfo.level === 2,
                    'text-primary': this.expInfo.level === 3,
                    'text-info': this.expInfo.level === 4,
                    'text-success': this.expInfo.level === 5,
                    'text-warning': this.expInfo.level === 6,
                    'text-danger': this.expInfo.level >= 7
                }
            }
        },
        mounted() {
            let _this = this;
            $("#card").hide();

            _this.loginUser = Tool.getLoginUser();

            if(Tool.isNotEmpty(_this.loginUser)){
                _this.$ajax.get(process.env.VUE_APP_SERVER + '/user/user/get-login-user/' + _this.loginUser.token).then(response=>{
                    let resp = response.data;
                    if(resp.success){
                        let loginUser = resp.content;
                        if(loginUser === null){
                            _this.setLoginUser({});
                            $("#card").hide();
                        }
                    }
                })
            }
        },

        methods: {
            hideCard(){
                setTimeout(function () {
                    $("#card").hide();
                },500)
            },
            showCard(){
                this.getExpAndLevel(this.loginUser.id);
                $("#card").show();
            },
            openLoginModal(){
                let _this = this;
                _this.$refs.loginComponent.openLoginModal();
                _this.$refs.loginComponent.MODAL_STATUS = "STATUS_LOGIN";
            },

            setLoginUser(loginUser){
                let _this = this;
                Tool.setLoginUser(loginUser);
                _this.loginUser = loginUser;
            },

            getExpAndLevel(id){
                let _this = this;
                if((typeof(id) == "undefined")){
                    return;
                }
                _this.$ajax.get(process.env.VUE_APP_SERVER + '/user/exp/get-user-exp/' + id).then(response=>{
                    let resp = response.data;
                    if(resp.success){
                        let expInfo = resp.content;
                        _this.expInfo = expInfo;
                        let percent = (expInfo.exp - expInfo.lastMaxExp) / (expInfo.maxExp - expInfo.lastMaxExp) * 100;
                        _this.expInfo.percent = percent;
                    }
                })
            },

            logout(){
                let _this = this;
                _this.$ajax.get(process.env.VUE_APP_SERVER + '/user/user/logout/'+_this.loginUser.token).then(response=>{
                    let resp = response.data;
                    if(resp.success){
                        _this.setLoginUser({});
                        Toast.success("退出登录成功");
                        $("#card").hide();
                        if (_this.$route.path === '/home') {
                            _this.$event.$emit("getLoginUser");
                        } else {
                            _this.$router.push("/home");
                        }
                    }else{
                        Toast.warning(resp.message);
                    }
                })
            }
        }

    }
</script>

<style scoped>
    .photo{
        width:40px;
        height:40px;
        border-radius:50%;
    }
    .photo:hover{
        border: 2px solid rgb(217,221,225);
        cursor: pointer;
    }
    .card{
        float: right;width: 300px;right: 15px;z-index: 10001;position: absolute;
    }
    .title-img{
        width: 35%;height: auto
    }
    .title-text{
        width: 65%
    }
    .half{
        width: 50%;
    }
    .flex{
        display: flex;
    }
    .bg-purple{
        background-color: rgba(174,50,255,0.43);
    }
    .text-purple{
        color: rgba(174,50,255,0.43);
    }

</style>